<template>
<el-card shadow="never" class="aui-card--fill">
  <el-form :inline="true" v-model="SearchForm"  @keydown.enter.native.prevent="getDataList()">
    <!-- <el-form-item>
      <el-input v-model="SearchForm.cgyName" placeholder="用户名" clearable></el-input>
    </el-form-item> -->
    <el-form-item>
      <!-- <el-button @click="getDataList()">查询</el-button> -->
      <el-button type="primary" @click="addOrUpdateHandle()">申请课题</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="dataList" border v-loading="dataListLoading" >
    <!-- @selection-change="selectionChangeHandle" -->
    <!-- <el-table-column type="selection" header-align="center" align="center" width="50">
    </el-table-column> -->
    <!-- <el-table-column prop="cgyId" header-align="center" align="center" width="80" label="课题ID">
    </el-table-column> -->
    <!-- <el-table-column prop="userId" header-align="center" align="center" width="80" label="用户ID">
    </el-table-column> -->
    <el-table-column type="index" align="center" label="编号" width="50"></el-table-column>
    <el-table-column prop="cgyName" header-align="center" align="center" width="100" :show-overflow-tooltip="true"
      label="课题名">
    </el-table-column>
    <!-- <el-table-column prop="cgyDepart" header-align="center" align="center" width="80" show-overflow-tooltip label="院系">
    </el-table-column> -->
    <!-- <el-table-column prop="cgyType" header-align="center" align="center" width="80" :show-overflow-tooltip="true" label="类型">
    </el-table-column> -->
    <!-- <el-table-column prop="cgyDepart" header-align="center" align="center" label="课题来源">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.cgyDepart === 2" size="small" type="warning" effect="plain">教师</el-tag>
        <el-tag v-else-if="scope.row.cgyDepart === 1" size="small" type="" effect="plain">学生</el-tag>
      </template>
    </el-table-column> -->
    <!-- <el-table-column prop="tusername" header-align="center" align="center" width="100" :show-overflow-tooltip="true"
      label="教师工号">
    </el-table-column> -->
    <el-table-column prop="teaName" header-align="center" width="90" :show-overflow-tooltip="true" align="center"
      label="指导老师">
    </el-table-column>
    <!-- <el-table-column prop="describes" header-align="center" width="110" :show-overflow-tooltip="true" align="center"
      label="描述"> </el-table-column> -->
    <el-table-column prop="cgyStatus" header-align="center" width="110" :show-overflow-tooltip="true" align="center"
      label="审核状态">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.cgyStatus === 0" size="small" type="info">审核中</el-tag>
        <el-tag v-else-if="scope.row.cgyStatus === 1" size="small" type="danger">驳回</el-tag>
        <el-tag v-else-if="scope.row.cgyStatus === 2" size="small" type="success">通过</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="cgyLeadstatus" header-align="center" width="110" :show-overflow-tooltip="true" align="center"
      label="院系审核状态">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.cgyLeadstatus === 0" size="small" type="info">未审核</el-tag>
        <el-tag v-else-if="scope.row.cgyLeadstatus === 1" size="small" type="danger">驳回</el-tag>
        <el-tag v-else-if="scope.row.cgyLeadstatus === 2" size="small" type="success">通过</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="cgyAdvise" header-align="center" align="center" width="160" label="指导意见">
    </el-table-column>
    <el-table-column prop="gmtCreate" header-align="center" align="center" width="180" label="创建时间">
    </el-table-column>
    <!-- <el-table-column prop="gmtModified" header-align="center" align="center" width="180" label="修改时间">
    </el-table-column> -->
    
    <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.userId,scope.row.cgyName)">修改
        </el-button>
        <el-button type="text" size="small" @click="deleteHandle(scope.row.cgyName)">
          删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex"
    :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="totalPage"
    layout="total, sizes, prev, pager, next, jumper">
  </el-pagination> -->
  <!-- 弹窗, 新增 / 修改 -->
  <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
</el-card>
</template>

<script>
// @ is an alias to /src
import servicesApi from '@/services/servicesApi';
import AddOrUpdate from './topic-add-or-update.vue'
export default {
data() {
  return {
    SearchForm: {
      cgyName: '',
    },
    dialogVisible: false,
    title: '新增',
    dataListLoading: false,
    addOrUpdateVisible: false,
    dataList: [
      {
        cgyId: 5,
        userId: 46,
        cgyName: 'veil',
        cgyDepart: 'string',
        cgyType: 'string',
        cgySource: 1,
        tusername: 'teacher',
        teaName: 'ldq1',
        describes: '1111',
        cgyStatus: 2,
        cgyLeadstatus: 2,
        cgyLeadadvice: null,
        cgyAdvise: null,
        gmtCreate: '2022-11-18 21:24:46',
        gmtModified: '2022-11-24 21:35:32',
        version: 7,
        deleted: 0
      }
    ]
  }
},
created() {
  this.getDataList()
},
components: {
  AddOrUpdate
},
methods: {
  // 获取数据列表
  getDataList() {
    this.dataListLoading = true
    servicesApi.getTopic().then(res => {
      // console.log(res.data)
      let code = res.data.code
      let data = res.data.data
      if (code === 200 && data) {
        let list = []
        list[0]=data 
        this.dataList = list
        // this.totalPage = data.total
      } else {
        this.dataList = []
        // this.totalPage = 0
      }
      this.dataListLoading = false
    })

  },
  // 新增 / 修改
  addOrUpdateHandle(userId, cgyName) {
    this.addOrUpdateVisible = true
    this.$nextTick(() => {
      // 当数据被修改后使用这个方法，会回调获取更新后的dom再渲染出来
      this.$refs['addOrUpdate'].init(userId, cgyName)
    })
  },
  // 删除
  deleteHandle(cgyName) {
    // //多选处理
    // var userIds = id ? [id] : this.dataListSelections.map(item => {
    //   return item.userId
    // })
    // // console.log(userIds)
    this.$confirm(`确定对[课题=${cgyName}]进行[删除操作]?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // this.deleteList.list = userIds
      servicesApi.delSelfTopic().then(res => {
        // console.log(res.data)
        let code = res.data.code
        if (code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getDataList()
            }
          })
        } else {
          this.$message.error(res.data.msg)
        }
      })
    })
  }
  
},
}
</script>
